<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>实验室助理工作管理系统</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/font.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/ztree/zTreeStyle.css}">
    <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
    <!--ztree js-->
    <script th:src="@{/js/ztree/jquery.ztree.all.min.js}"></script>
    <script th:src="@{/js/ztree/jquery.ztree.core.min.js}"></script>
    <script th:src="@{/js/ztree/jquery.ztree.excheck.min.js}"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="dName" class="layui-form-label">
                    <span class="x-red">*</span>部门名称</label>
                <div class="layui-input-inline">
                    <input type="text" id="dName" name="dName" required="required" lay-verify="dName"
                           autocomplete="off"
                           class="layui-input"></div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="typeId" class="layui-form-label">
                    <span class="x-red">*</span>部门类型</label>
                <div class="layui-input-inline">
                    <select class="form-control m-b" id="typeId" name="typeId" th:object="${type}" lay-verify="typeId">
                        <option>请选择</option>
                        <option th:each="t:${type}" th:value="${t.id}" th:text="${t.typeName}"></option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
            </div>
            <div class="layui-form-item">
                <label for="pid" class="layui-form-label">
                    <span class="x-red">*</span>上一级部门</label>
                <div class="layui-input-inline">
                    <div class="col-sm-10">
                        <input type="hidden" id="pid" name="pid" lay-verify="pid" value=""/>
                        <div>
                            <ul id="tree" class="ztree"></ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button type="submit" id="add_btn" class="layui-btn" lay-filter="add" lay-submit="">提交</button>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'layer', 'jquery'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;


            //自定义验证规则
            form.verify({
                labName: function (value) {
                    if (value.length < 3) {
                        return '账号至少得3个字符啊';
                    }
                },
            });

            //监听提交
            form.on('submit(add)',
                function (data) {
                    console.log(data);
                    $.ajax({
                        type: "post",
                        url: "http://localhost:9527/sysLab/department/departmentAdd",
                        async: false,
                        dataType: 'json',
                        data: {
                            dName: data.field.dName,
                            dId: '0',
                            typeId: data.field.typeId,
                            pid: data.field.pid
                        },
                        success: function (res) {
                            //console.log("======" + res.data);
                            if (res.data == "success") {
                                //console.log("enter ==>")
                                layer.alert("增加成功", {
                                        icon: 6
                                    },
                                    function () {
                                        //关闭当前frame
                                        xadmin.close();

                                        // 可以对父窗口进行刷新
                                        xadmin.father_reload();
                                    });
                            } else {
                                layer.alert("用户已存在！", {
                                    icon: 6
                                });
                            }
                        },
                        error: function (res) {
                            layer.alert("增加失败", {
                                icon: 6
                            });
                        }
                    })
                    return false;
                });
        });
</script>
<script type="text/javascript">
    var settingss = {
        data: {
            simpleData: {
                enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
                idKey: "did",  //节点数据中保存唯一标识的属性名称
                pIdKey: "pid",    //节点数据中保存其父节点唯一标识的属性名称
                rootPId: 0  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
            },
            key: {
                name: "dname"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
            }
        },
        check: {
            enable: true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
            chkStyle: "radio",
            radioType: "all"
            /* chkboxType: { "Y": "ps", "N": "ps" } */
        }

    };

    //使用ajax加载数据
    $(document).ready(function () {
        //layer.alert('内容');

        $.ajax({
            type: "get",
            url: "http://localhost:9527/sysLab/department/departmentTree",
            async: true,
            success: function (res) {

                //alert(res);
                console.log(res);
                zTreeObj = $.fn.zTree.init($("#tree"), settingss, res); //初始化树
                zTreeObj.expandAll(true);   //true 节点全部展开、false节点收缩
            }
        });
        //重新绑定表单提交
        $("#tree").bind("check", function () {
            console.log("==>")
            var treeObj = $.fn.zTree.getZTreeObj("tree");
            var nodes = treeObj.getCheckedNodes(true);

            var pid = nodes[0].dId;

            if (nodes.length == 0) {
                $("#pid").val(0);
            } else {
                $("#pid").val(pid);
            }

            //$('form').submit();
        });
    });

</script>

</body>

</html>
